<template>
  <div>
    <van-cell-group>
      <!-- 工单号 -->
      <van-cell title="工单号" :value="projectId" />
      <!-- 项目信息 -->
      <van-cell title="项目信息" is-link to="/project" />
      <!-- 项目商品信息 -->
      <van-cell title="项目商品信息" is-link to="/goods" />
      <!-- 当前状态 -->
      <van-cell title="当前状态" value="待（地市）复核" />
      <!-- 审批结果 -->
      <van-cell title="审批结果">
        <template #default>
          <van-switch v-model="checked" size="20" />
        </template>
      </van-cell>
      <!-- 备注 -->
      <van-cell title="备注">
        <template #label>
          <van-field v-model="message" rows="4" autosize type="textarea" maxlength="50" show-word-limit />
        </template>
      </van-cell>
      <span class="remarks">简述审批备注</span>
      <!-- 地市审批人 -->
      <van-cell>
        <template #title>
          <div class="approval">
            <span>地市审批人</span>
            <van-field v-model="city.fieldValue" readonly placeholder="点击选择审批人" @click="city.show = true" />
            <van-popup v-model="city.show" round position="bottom">
              <van-cascader v-model="city.cascaderValue" title="点击选择审批人" :options="city.options" @close="city.show = false" @finish="onCityFinish" />
            </van-popup>
          </div>
        </template>
      </van-cell>
      <!-- 省级审批人 -->
      <van-cell>
        <template #title>
          <div class="approval">
            <span>省级审批人</span>
            <van-field v-model="province.fieldValue" readonly placeholder="点击选择审批人" @click="province.show = true" />
            <van-popup v-model="province.show" round position="bottom">
              <van-cascader v-model="province.cascaderValue" title="点击选择审批人" :options="province.options" @close="province.show = false" @finish="onProvinceFinish" />
            </van-popup>
          </div>
        </template>
      </van-cell>
    </van-cell-group>
    <van-button round color="#f89322">提交</van-button>
  </div>
</template>

<script>
export default {
  name: 'WorkOrderVue',
  data() {
    return {
      // 开关状态
      checked: false,
      // 备注信息收集
      message: '',
      // 市
      city: {
        show: false,
        fieldValue: '',
        cascaderValue: '',
        // 选项列表，children 代表子选项，支持多级嵌套
        options: [
          {
            text: '张三',
            value: '1',
          },
          {
            text: '李四',
            value: '2',
          },
        ],
      },
      // 省
      province: {
        show: false,
        fieldValue: '',
        cascaderValue: '',
        // 选项列表，children 代表子选项，支持多级嵌套
        options: [
          {
            text: '王五',
            value: '1',
          },
          {
            text: '赵六',
            value: '2',
          },
        ],
      }
    }
  },
  computed: {
    projectId() {
      return this.$store.state.projectId
    }
  },
  methods: {
    // 全部选项选择完毕后，会触发 finish 事件
    onCityFinish({ selectedOptions }) {
      this.city.show = false;
      this.city.fieldValue = selectedOptions.map((option) => option.text).join('/');
    },
    onProvinceFinish({ selectedOptions }) {
      this.province.show = false;
      this.province.fieldValue = selectedOptions.map((option) => option.text).join('/');
    },
  },
}
</script>

<style lang="less" scoped>
.remarks {
  position: fixed;
  top: 289px;
  right: 19px;
  font-size: 14px;
  color: #aaa;
}
.approval {
  display: flex;
  align-items: center;
  span {
    width: 105px;
  }
}
.van-field {
  padding: 0 16px;
}
.van-button {
  margin-top: 10px;
  margin-left: 20px;
  width: 330px;
  height: 36px;
}
</style>